<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM事件流的捕获与冒泡</title>
		<style>
			.father {
				width: 500px;
				height: 500px;
				background-color: red;
			}
			.son {
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">一个普普通通的盒子</div>
		</div>
		<script>
			/* 
			 1、js代码中只能执行捕捉或者是冒泡当中的一个阶段
			 2、在实际开发中，我们可能更关注事件冒泡
			 3、有一些事件没有冒泡，onfocus,onblur等等
			 */
			
			/* var son = document.querySelector('.son');
			son.addEventListener('click',function(){
				alert("儿子被点击了");
			})
			var father = document.querySelector('.father');
			father.addEventListener('click',function(){
				alert('父亲被点击了');
			}) */
			
			// addEventListener第三个参数支持两个值，一个是false，另一个是true
			// false就是冒泡阶段执行
			// true就是捕捉阶段执行
			var son = document.querySelector('.son');
			son.addEventListener('click',function(){
				alert("儿子被点击了");
			},true);
			var father = document.querySelector('.father');
			father.addEventListener('click',function(){
				alert('父亲被点击了');
			},true);
			
		</script>
		
	</body>
</html>